<!DOCTYPE html>
<!-- html -->
<html>
<!-- head -->

<head>
    <title>注册</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /><!-- bootstrap-CSS -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type='text/javascript' src='js/jquery-2.2.3.min.js'></script>
<!-- Custom Theme files -->
<link href="css/menu.css" rel="stylesheet" type="text/css" media="all" /> <!-- menu style --> 
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />  
<!--//theme-style-->
<!--meta data-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="keywords" content="" />
<style>
    #register{
        text-align: right;
    }
    .w3-agree input{
        vertical-align: middle;
    }
    .error{
        background-color: #ec3434;
        opacity: .8;
        color: #fff;
        margin-left: 30%;
        font-size: 13px;
        padding-left: 5px;
        display: none;
    }
    p.error_apply{
        margin-left:0px
    }
    div.w3_modal_body_grid1{
        margin-bottom: 2px;
    }
    #float_view{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 666;
    }
    #msg{
       width: 60%;
       position: absolute;
       height: 60px;
       background: white;
       top: 200px;
       left: 20%;
       border-radius: 8px;
       text-align: center;
       color: red;
       line-height: 60px;
       font-size: 20px;
    }
    .radio_choose .radio {
        display: inline-block;
        padding-top: 10px;
        margin-right: 10px
    }

    .radio_choose .radio i {
        background-color: #fff;
        border: 1px solid #ec3434;
        border-radius: 50%;
        margin-top: 10px
    }

    .radio_choose .radio input+i:after {
        background-color: #ec3434 !important;
    }
</style>
<script type="text/javascript">
    function isWeixnOpen(){

    var ua = navigator.userAgent.toLowerCase();

    if(ua.match(/MicroMessenger/i)=="micromessenger") {

        return true;

    } else {

        return false;

    }

}
 $(function(){
  if (isWeixnOpen()) {

  }
  else{
    // document.oncontextmenu=new Function("event.returnValue=false;");
    // document.onselectstart=new Function("event.returnValue=false;");
    // $("body").text("请在微信打开");
    // $("body").css("text-align","center");
  }
 })
</script>
    <!-- //nav smooth scroll -->
    <!-- Calendar -->
    <link rel="stylesheet" href="css/jquery-ui.css" />
    <script src="js/jquery-ui.js"></script>
    <script>
    $(function() {
        $("#datepicker").datepicker();
    });
    </script>
    <!-- //Calendar -->
    <link rel="stylesheet" href="css/intlTelInput.css">
</head>
<!-- //head -->
<!-- body -->


<body>
    
    <!-- header -->
    <!-- /header -->
    <div id="float_view">
        <div id="msg">
           
        </div>
    </div>
    <div class="w3layouts-banner" id="home">
        <div class="container">
            
             <img style="position: absolute;width: 100px;top: 10px;left: 10px;z-index: 999;"  src="./images/logo.png">
            <div class="logo">
                <h1><a class="cd-logo link link--takiri" href="index.html"> <span><i class="fa fa-heart" aria-hidden="true"></i></span></a></h1>
            </div>
            <div class="clearfix"></div>
            <div class="agileits-register">
                <h3>现在就注册</h3>
                <form action="./index_add.html" method="post" id="form_register">
                   
                     <div class="w3_modal_body_grid w3_modal_body_grid1">
                        <span>昵称:</span>
                        <input type="text" name="cName" placeholder=""/>
                    </div>
                    <p class="error error_one">昵称不能为空</p>
                    <div class="w3_modal_body_grid w3_modal_body_grid1">
                        <span>姓名:</span>
                        <input type="text" name="Name" placeholder=""  />
                    </div>
                    <p class="error error_two_reg">请输入中文名</p>
                    <p class="error error_two">姓名不能为空</p>
                    <div class="w3_modal_body_grid">
                        <span>性别:</span>
                        <div class="radio_choose radio_gender">
                            <label class="radio">
                                <input type="radio" name="radio" checked value='0'><i></i>男
                            </label>
                            <label class="radio">
                                <input type="radio" name="radio" value='1'><i></i>女
                            </label>
                        </div>
                    </div>
                    <!-- <div class="w3_modal_body_grid">
                        <span>性别:</span>
                        <div class="w3_gender">
                            <div class="colr ">
                                <label class="radio ert">
                                    <input type="radio" name="radio" checked=""  value='0'><i></i>男</label>
                            </div>
                            <div class="colr ">
                                <label class="radio">
                                    <input type="radio" name="radio"   value='1'><i></i>女</label>
                            </div>
                            <div class="clearfix"> </div>
                        </div>
                        <div class="clearfix"> </div>
                    </div> -->
                    <div class="w3_modal_body_grid w3_modal_body_grid1">
                        <span>手机号:</span>
                        <input type="text" name="number" placeholder=" "  />
                    </div>
                     <!-- <div class="w3_modal_body_grid" style="margin-top: 10px;">
                        <span>你的职业:</span>
                        <select id="w3_country" class="frm-field" name="jobname">
                            <option  value="程序员">程序员</option>
                            <option value="医生">医生</option>
                            <option value="学生">学生</option>
                            <option value="公务员">公务员</option>
                            <option value="HR">HR</option>
                            <option value="其他">其他</option>
                        </select>
                    </div> -->
                    <div class="w3_modal_body_grid w3_modal_body_grid1">
                        <span>职业:</span>
                        <input type="text" name="work" placeholder=""  />
                    </div>
                    <p class="error error_work">输入职业</p>
                    <div class="w3_modal_body_grid w3_modal_body_grid1">
                        <span>身份证号:</span>
                        <input type="text" name="codeNum" placeholder=" "  />
                    </div>
                    <p class="error error_code">输入正确身份证号</p>
                  
                    <div class="w3_modal_body_grid" style="margin-top: 10px;">
                        <span>邮箱:</span>
                        <input type="email" name="Email" placeholder=" " />
                    </div>
                    <p class="error error_four">邮箱不能为空</p>
                    <div class="w3_modal_body_grid w3_modal_body_grid1">
                        <span>登录密码:</span>
                        <input type="password" name="Password" placeholder=""  />
                    </div>
                    <p class="error error_five">密码不能为空</p>
                    <div class="w3-agree">
                        <input type="checkbox" id="c1" name="cc">
                        <label class="agileits-agree">我已经阅读并同意 <a href="terms.html">用户协议</a></label>
                    </div>
                    <p class="error error_apply error_six">如果同意用户协议请勾选</p>
                     <div id="register">
                            <input type='submit' value='免费注册'/>
                         <!-- <a  href="./index_add.html">免费注册</a> -->
                        </div>
                    <div class="clearfix"></div>
                    <p class="w3ls-login" style="margin-top:30px;">已经是会员? <a href="#" data-toggle="modal" data-target="#myModal">登录</a></p>
                </form>
            </div>
            <!-- Modal -->
            <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">登录</h4>
                        </div>
                        <div class="modal-body">
                            <div class="login-w3ls">
                               <!--  <form id="signin"  > -->
                                    <label>手机号: </label>
                                    <input type="text" id="logo_user" name="UserName" placeholder="手机号">
                                    <p class="error error_apply error_seven">请输入正确的手机号</p>
                                    <!-- <p class="error error_apply error_seven_reg">用户名为中文</p> -->
                                    <label>密码:</label>
                                    <input type="password" id="logo_password" name="loginPassword" placeholder="密码" >
                                    <p class="error error_apply error_eight">密码不能为空</p>
                                    <div class="w3ls-loginr">
                                        <!-- <a href="#">忘记密码?</a> -->
                                    </div>
                                    <div class="clearfix"> </div>
                                    <button  value="登录" id="submitAction">登录</button>
                                    <div class="clearfix"> </div>
                        
                              <!--   </form> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //Modal -->
        </div>
    </div>
    <!-- Find your soulmate -->
  
    <div class="w3l_find-soulmate text-center">
         
        
    </div>
    
    <script src="js/bootstrap.js"></script>
</body>
<script type="text/javascript">
    $(function(){
        $("#float_view").hide();
        // 选择职业
        var profession
        $('.frm-field').change(function(){
            profession = $(this).val()
      })
      $('.radio_gender .radio').eq(0).find('i').css('background-color', '#ec3434')
      // 性别
        $('.radio_gender .radio').each(function() {
            $(this).click(function() {
                Gender = $(this).index()
                $(this).find('i').css('background-color', '#ec3434')
                $(this).siblings().find('i').css('background-color', '#ffffff')
                $(this).attr('value', $(this).index())
            })
        })
      $("form").submit(function(e) {
        e.preventDefault();
        var data = $(this).serialize()
       console.log(data)
        //   手机号验证
        var phoneReg = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/
        // 姓名验证
        var nameReg = /^[\u4e00-\u9fa5]{0,}$/
        if ($("input[name=cName]").val() == '') {
            $('.error_one').css('display','block')
            setTimeout(function(){
              $('.error_one').css('display','none')
            }, 2000)
            return
          }
          if ($("input[name=Name]").val() == '') {
            $('.error_two').css('display','block')
            setTimeout(function(){
              $('.error_two').css('display','none')
            }, 2000)
            return
          }
          if (nameReg.test($("input[name=Name]").val()) == false) {
            $('.error_two_reg').css('display','block')
            setTimeout(function(){
              $('.error_two_reg').css('display','none')
            }, 2000)
            return
          }
          if ($("input[name=number]").val() == '') {
            $('.error_three').css('display','block')
            setTimeout(function(){
              $('.error_three').css('display','none')
            }, 2000)
            return
          }
          if (phoneReg.test($("input[name=number]").val()) == false) {
            $('.error_three_reg').css('display','block')
            setTimeout(function(){
              $('.error_three_reg').css('display','none')
            }, 2000)
            return
          }
          if ($("input[name=work]").val()=="") {
            $('.error_work').css('display','block')
            setTimeout(function(){
              $('.error_work').css('display','none')
            }, 2000)
            return
          }
          if ($("input[name=codeNum]").val().length < 18) {
            $('.error_code').css('display','block')
            setTimeout(function(){
              $('.error_code').css('display','none')
            }, 2000)
            return
          }
          if ($("input[name=Email]").val() == '') {
            $('.error_four').css('display','block')
            setTimeout(function(){
              $('.error_four').css('display','none')
            }, 2000)
            return
          }
          if ($("input[name=Password]").val() == '') {
            $('.error_five').css('display','block')
            setTimeout(function(){
              $('.error_five').css('display','none')
            }, 2000)
            return
          }
          if ($("input[name=cc]").is(':checked') === false) {
            $('.error_six').css('display','block')
            setTimeout(function(){
              $('.error_six').css('display','none')
            }, 2000)
            return
          }
          if ($("input[name=cName]").val() !== '' && $("input[name=Name]").val() !== '' && $("input[name=number]").val() !== '' && $("input[name=Email]").val() !== '' && $("input[name=Password]").val() !== '' && $("input[name=cc]").is(':checked') === true) {
            var Checked
            if ($("input[name=cc]").is(':checked') == true) {
                Checked = 'on'
            }
            // var json= {
            //     cName: $("input[name=cName]").val(),
            //     codeNum:$("input[name=codeNum]").val(),
            //     Name: $("input[name=Name]").val(),
            //     Number: $("input[name=number]").val(),
            //     Email: $("input[name=Email]").val(),
            //     work: $("input[name=work]").val(),
            //     Password: $("input[name=Password]").val(),
            //     Checked: Checked
            // }
           
             $.ajax({
             method: "post",
             data:data,
             url: "/member/login",
            success: function(res) {
               if(res.code==200){
              
                localStorage.setItem('number', $("input[name=number]").val());
                window.location.replace('./message.html');

               }else if(res.code==400){
                $("#msg").text("该手机号已经注册")
                $("#float_view").show();
               }
               // window.location.href = './index_add.html'
            },
            error: function(error) {
                console.log(error)
            }
            })
            
          }
      })
      $('#submitAction').click(function(){
          // 姓名验证
          console.log("====")
        var nameReg = /^[\u4e00-\u9fa5]{0,}$/
        if ($("input[name=UserName]").val() == ''||$("input[name=UserName]").val().length<11) {
            $('.error_seven').css('display','block')
            setTimeout(function(){
              $('.error_seven').css('display','none')
            }, 2000)
            return
        }
        
         console.log("****")
        if ($("input[name=loginPassword]").val() == '') {
            $('.error_eight').css('display','block')
            setTimeout(function(){
                $('.error_eight').css('display','none')
            }, 2000)
            return
        }
    
         $.ajax({
             method: "get",
           
             url: "/member/loading?number="+$("input[name=UserName]").val()+"&passWord="+$("input[name=loginPassword]").val(),
            success: function(res) {
             console.log(res);
             if (res.code==400) {
                $("#myModal").css("display","none");
                $("#myModal").attr("aria-hidden","true");
                $("#myModal").removeClass('in');
                $("div").removeClass("modal-backdrop fade in");
                $("#msg").text("手机号或者密码错误");
                $("#float_view").show();
             }else if(res.code==200){
                localStorage.setItem('user', $("input[name=UserName]").val())
                window.location.replace('./success.html');
             }
               // 
            },
            error: function(error) {
                console.log(error)
            }
            })

      })
    })
    $("#float_view").click(function () {
       $("#float_view").hide();
        // body...
    })
</script>
</html>
